Webpack plugins

Catalyst uses Webpack as its bundler. It provides out-of-the-box configuration for development and production builds.

Catalyst still provide you with a way to add webpack plugins for development, client and server-side-rendering build.

They can be added through the webpackConfig.js file.

webpackConfig.js exports an object that has three keys:

• developmentPlugins: An array containing the webpack plugins that will be added to the development configuration.
• ssrPrugins: An array containing the webpack plugins that will be added to the server-side-rendering configuration, affecting the ssr build for production.
• clientPlugins: An array containing the webpack plugins that will be added to the client configuration, affecting the client build for production.

All the plugins added in webpackConfig.js will be appended to the end of the list of plugins that we are already using. This way of adding plugins should only be used to upload assets and monitor builds, not to perform any optimizations as it might break the default strategies used in Catalyst.

Example: Add StatoscopeWebpackPlugin to monitor development builds and UploadAssetsPlugin to upload assets to S3 Bucket.

webpackConfig.js

const path = require("path")
import UploadAssetsPlugin from "upload-asset-plugin"
const StatoscopeWebpackPlugin = require("@statoscope/webpack-plugin").default

module.exports = {
    developmentPlugins: [new StatoscopeWebpackPlugin()],
    ssrPrugins: [],
    clientPlugins: [
           new UploadAssetsPlugin({
                assetsDir: path.join(__dirname, "./build/public") + "/",
                s3BucketName:"s3Bucker",
                s3Folder: `s3Folder`,
            }),
    ],
}